<template>
  <div class="q-pa-md q-gutter-md">
    <t-list bordered class="rounded-borders" style="max-width: 350px">
      <t-item-label header>Friends</t-item-label>

      <t-item clickable v-ripple>
        <t-item-section avatar>
          <t-avatar>
            <img src="https://cdn.quasar.dev/img/avatar2.jpg" />
          </t-avatar>
        </t-item-section>

        <t-item-section>
          <t-item-label lines="1">Brunch this weekend?</t-item-label>
          <t-item-label caption lines="2">
            <span class="text-weight-bold">Janet</span>
            -- I'll be in your neighborhood doing errands this weekend. Do you
            want to grab brunch?
          </t-item-label>
        </t-item-section>

        <t-item-section side top> 1 min ago </t-item-section>
      </t-item>

      <t-separator inset="item" />

      <t-item clickable v-ripple>
        <t-item-section avatar>
          <t-avatar>
            <img src="https://cdn.quasar.dev/img/avatar4.jpg" />
          </t-avatar>
        </t-item-section>

        <t-item-section>
          <t-item-label lines="1">Linear Project</t-item-label>
          <t-item-label caption lines="2">
            <span class="text-weight-bold">John</span>
            -- Can we schedule a call for tomorrow?
          </t-item-label>
        </t-item-section>

        <t-item-section side top> 1 min ago </t-item-section>
      </t-item>
    </t-list>

    <t-list bordered class="rounded-borders" style="max-width: 600px">
      <t-item-label header>Google Inbox style</t-item-label>

      <t-item>
        <t-item-section avatar top>
          <t-icon name="account_tree" color="black" size="34px" />
        </t-item-section>

        <t-item-section top class="col-2 gt-sm">
          <t-item-label class="q-mt-sm">GitHub</t-item-label>
        </t-item-section>

        <t-item-section top>
          <t-item-label lines="1">
            <span class="text-weight-medium">[quasarframework/quasar]</span>
            <span class="text-grey-8"> - GitHub repository</span>
          </t-item-label>
          <t-item-label caption lines="1">
            @rstoenescu in #3: > Generic type parameter for props
          </t-item-label>
          <t-item-label
            lines="1"
            class="q-mt-xs text-body2 text-weight-bold text-primary text-uppercase"
          >
            <span class="cursor-pointer">Open in GitHub</span>
          </t-item-label>
        </t-item-section>

        <t-item-section top side>
          <div class="text-grey-8 q-gutter-xs">
            <t-btn class="gt-xs" size="12px" flat dense round icon="delete" />
            <t-btn class="gt-xs" size="12px" flat dense round icon="done" />
            <t-btn size="12px" flat dense round icon="more_vert" />
          </div>
        </t-item-section>
      </t-item>

      <t-separator spaced />

      <t-item>
        <t-item-section avatar top>
          <t-icon name="account_tree" color="black" size="34px" />
        </t-item-section>

        <t-item-section top class="col-2 gt-sm">
          <t-item-label class="q-mt-sm">GitHub</t-item-label>
        </t-item-section>

        <t-item-section top>
          <t-item-label lines="1">
            <span class="text-weight-medium">[quasarframework/quasar]</span>
            <span class="text-grey-8"> - GitHub repository</span>
          </t-item-label>
          <t-item-label caption lines="1">
            @rstoenescu in #1: > The build system
          </t-item-label>
          <t-item-label
            lines="1"
            class="q-mt-xs text-body2 text-weight-bold text-primary text-uppercase"
          >
            <span class="cursor-pointer">Open in GitHub</span>
          </t-item-label>
        </t-item-section>

        <t-item-section top side>
          <div class="text-grey-8 q-gutter-xs">
            <t-btn class="gt-xs" size="12px" flat dense round icon="delete" />
            <t-btn class="gt-xs" size="12px" flat dense round icon="done" />
            <t-btn size="12px" flat dense round icon="more_vert" />
          </div>
        </t-item-section>
      </t-item>
    </t-list>
  </div>
</template>
